<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="content_body">
    <canvas class="canvas" width="700px" height="400px"></canvas>
</div>
<script>
    let canvas = document.getElementsByClassName("canvas")[0];
    let ctx = canvas.getContext('2d');
    // 绘制图片的三种方式
    let img = new Image();
    img.onload = function () {
        // ctx.drawImage(img,1,245,150,150)
        // 动态的去获取当前图片的尺寸
        let imgWidth = img.width;
        let imgHeight = img.height;

        // 计算每一个小人物的尺寸
        let personWidth = imgWidth / 4;
        let personHeight = imgHeight / 3;

        //帧动画，在一定的时间让它走动
        let index = 0;
        //绘制在画布的中心
        /*图片绘制的起始点*/
        let x0 = ctx.canvas.width / 2 - personWidth / 2;
        let y0 = ctx.canvas.height / 2 - personHeight / 2;

        ctx.drawImage(img, 0, 0, personWidth, personHeight, x0, y0, personWidth, personHeight)
        setInterval(function () {
            index++;
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            ctx.drawImage(img, index * personWidth, 0, personWidth, personHeight, x0, y0, personWidth, personHeight);
            if (index >= 3) {
                index = 0;
            }
        },500)
    };
    img.src = 'jingLing.jpg';
</script>
</body>
</html>